<template>
    <div class="expert">
        <div class="banner">
            <div class="ax-row">
                <span>大咖云集</span>
            </div>
        </div>
        <div class="expertCommittee">
            <div class="bg1"></div>
            <div class="bg2"></div>
            <div class="bg3"></div>
            <div class="common_container">
                <div class="section-header">
                    <h2>专家委员会</h2>
                    <p>Expert Committee</p>
                    <p class="hint">(专家排名不分先后)</p>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="Expert">


</script>



<style scoped lang="scss">
.expert{
    margin-top: 105px;
    width: 100%;
    height: 8000px;
    background-image: url('src/assets/expert/banner.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}
.banner{
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    .ax-row{
        width: 1437px;
        height: 100%;
        display: flex;
        align-items:center;
        font-size: 48px;
        font-weight: bold;
        color: aliceblue;
        span{
            display: block;
        }
    }
}
.expertCommittee{
    position: relative;
    height: 577px;
    .bg1{
        position: absolute;
        width: 323px;
        height: 282px;
        left: -100px;
        bottom: 0;
        background-image: url('src/assets/expert/expert_bg1.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 1;
    }
    .bg2{
        position: absolute;
        width: 219px;
        height: 809px;
        right: 0;
        top: 100%;
        background-image: url('src/assets/expert/expert_bg2.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 1;
    }
    .bg3{
        position: absolute;
        width: 233px;
        height: 440px;
        left: -120px;
        top: 100%;
        background-image: url('src/assets/expert/expert_bg3.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 1;
    }
    .common_container{
        position: relative;
        margin: 0 auto;
        width: 1440px;
        height: 100%;
        border-radius: 14px;
        z-index: 2;
        background-color: rgba(255, 255, 255, 0.8);
        .section-header {
            padding-top: 90px;
            text-align: center;
            margin-bottom: 40px;
            h2 {
                margin-bottom: 10px;
                font-size: 36px;
                font-weight: bold;
                color: rgb(45, 177, 186);
            }
            p {
                margin-bottom: 4px;
                font-size: 18px;
                margin-top: 16px;
                color: rgb(72, 187, 195);
            }
            .hint{
                margin-bottom: 4px;
                font-size: 14px;
            }
        }
    }
}

</style>
  